<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>购物车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .product{
            display:flex;
            align-items: center;
            justify-content: center;
            font-size:12px;
        }
        .priceAndCountDiv{
            display:flex;
            justify-content: space-between;
        }
        .titleDiv{
            margin-top:-.5rem;
            margin-bottom:1.2rem;
        }
        .product{
            opacity: 1;
            transition: all 0.2s;
        }
        .product>*{
            margin:.2rem;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <h1 class="title" id="shopCarCount">标题</h1>
        </header>
        <!-- 你的html代码 -->
        <!-- class="content" 可以出现滚动条 -->
        <div class="content">

            <div> <img width="20" id="allSelectImg" src="" style="vertical-align: middle" /> 全选</div>
            <div id="shopCarDiv">

            </div>

            <div id="emptyCar" style="display:none;">
                您的购物车没有东西哦！
            </div>

            <div onclick="generateOrder()" style="position:fixed;width:100%;height:2rem;background:orange;text-align:center;line-height:2rem;z-index:9999">提交订单</div>

        </div>


    </div>


</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

<script>

    function generateOrder(){
        var p = shopCar[0];
        location = 'http://localhost:8080/jsp1/zfbpay?' +
            'price='+p.price+'&' +
            'subject='+"Under Armour"+'&' +
            'body=Under Armour';
    }

    var noneSelectImgSrc = "";
    var selectImgSrc = "";
    var shopCar;

    allSelectImg.onclick = function(){
        this.src = this.src == selectImgSrc?
            noneSelectImgSrc:selectImgSrc;

        var allSelectImgSrc = this.src;

        // jquery 中循环函数 each
        // 这个函数有两个参数，
        // index 表示循环索引
        // ele 表示循环的元素（标签）
        // .ckimg 就是每个商品前面选择图片
        $(".ckimg").each(function(index,ele){
            ele.src = allSelectImgSrc;
        });
    };

    window.onload = function() {
        // 显示loading
        $.showPreloader();
        $("#shopCarDiv").hide();
        var loadedImageCount = 0;

        shopCar = JSON.parse(localStorage.getItem("shopCar"));
        if (!shopCar||shopCar.length==0) {
            emptyCar.style.display = "block";
            $.hidePreloader();
        } else {
            shopCarCount.innerHTML = "购物车("+ shopCar.length+")";
            for (var i = 0; i < shopCar.length; i++) {
                var product = shopCar[i];
                var productDiv = document.createElement("div");
                productDiv.className = "product";

                var selectImg = document.createElement("img");
                selectImg.src = noneSelectImgSrc;
                selectImg.style.height = "20px";
                selectImg.className = "ckimg";
                selectImg.onclick = function(){
//                  this.src = this.src == selectImgSrc
//                      ?noneSelectImgSrc:selectImgSrc;

                    if(this.src == selectImgSrc){
                        this.src = noneSelectImgSrc;
                    }else{
                        this.src = selectImgSrc;
                    }
                };

                var productImage = document.createElement("img");
                productImage.src = product.pic;
                productImage.style.height = "100px";
                productImage.onload = function(){
                    loadedImageCount++;
                    if(loadedImageCount==shopCar.length){
                        $.hidePreloader();
                        $("#shopCarDiv").show(300);
                    }
                };

                var productInfoDiv = document.createElement("div");

                var titleDiv = document.createElement("div");
                titleDiv.className = "titleDiv";
                titleDiv.innerHTML = product.title;

                var priceAndCountDiv = document.createElement("div");
                priceAndCountDiv.className = "priceAndCountDiv";

                var priceSpan = document.createElement("span");
                priceSpan.innerHTML = "&yen; " + product.price;

                var countSpan = document.createElement("span");
                countSpan.innerHTML = "x " + product.count;

                priceAndCountDiv.appendChild(priceSpan);
                priceAndCountDiv.appendChild(countSpan);

                productInfoDiv.appendChild(titleDiv);
                productInfoDiv.appendChild(priceAndCountDiv);

                var inputDiv = document.createElement("input");
                inputDiv.style.width = "100px";
                inputDiv.type = "number";
                inputDiv.value = product.count;
                productInfoDiv.appendChild(inputDiv);

                var deleteBtn = document.createElement("input");
                deleteBtn.value = "删除";
                deleteBtn.type = "button";
                productInfoDiv.appendChild(deleteBtn);
                deleteBtn.nid = product.nid;
                deleteBtn.onclick = function(){
                    deleteProductFromShopCart(this,this.nid);
                };

                productDiv.appendChild(selectImg);
                productDiv.appendChild(productImage);
                productDiv.appendChild(productInfoDiv);

                shopCarDiv.appendChild(productDiv);

            }
        }
    }


    function deleteProductFromShopCart(deleteBtn,nid){


        for(var i=0;i<shopCar.length;i++){
            // 如果购物车对象中已经存在了这个商品
            if(shopCar[i].nid == nid){
                $.confirm('您确定要移除该宝贝吗?', function () {
                    shopCar.splice(i,1);
                    console.log(i);
                    $(deleteBtn).parents(".product").css("height",
                        $(deleteBtn).parents(".product").height());
                    setTimeout(function(){
                        $(deleteBtn).parents(".product").css("opacity",0);
                        $(deleteBtn).parents(".product").css("height",0);
                    },1);
                    shopCarCount.innerHTML = "购物车("+ shopCar.length+")";
                    $.toast("移除成功！");
                    if(shopCar.length==0){
                        emptyCar.style.display = "block";
                    }
                    // 存进本地存储，替换原来的购物车信息
                    localStorage.setItem("shopCar",JSON.stringify(shopCar));
                });

                break;
            }
        }




    }
</script>
</body>
</html>